<!DOCTYPE html>
<html>
<head>
    <title>文字识别</title>
    <meta charset="utf-8"/>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f5f5f5;
            color: #333;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 800px;
            margin: 30px auto;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: relative;
        }
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
        }
        .upload-area {
            border: 2px dashed #3498db;
            border-radius: 5px;
            padding: 30px;
            text-align: center;
            margin-bottom: 20px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .upload-area:hover {
            background-color: #f0f8ff;
            border-color: #2980b9;
        }
        .upload-area.active {
            background-color: #e1f0fa;
            border-color: #2980b9;
        }
        #imagePreview {
            max-width: 100%;
            max-height: 300px;
            margin: 20px auto;
            display: none;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        #imageFile {
            display: none;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #2980b9;
        }
        button:disabled {
            background-color: #95a5a6;
            cursor: not-allowed;
        }
        .result-container {
            margin-top: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        .result-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #2c3e50;
        }
        #resultText {
            width: 100%;
            min-height: 200px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: white;
            font-family: inherit;
            resize: vertical;
        }
        #resultText:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }
        .loading {
            text-align: center;
            padding: 20px;
        }
        .spinner {
            border: 4px solid rgba(0, 0, 0, 0.1);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border-left-color: #3498db;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .tips {
            font-size: 14px;
            color: #7f8c8d;
            margin-top: 20px;
            padding: 10px;
            background-color: #ecf0f1;
            border-radius: 5px;
        }
        .error-message {
            color: #e74c3c;
            margin-top: 20px;
            padding: 10px;
            background-color: #fadbd8;
            border-radius: 5px;
            text-align: center;
        }
        .action-buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
        .upload-icon {
            width: 48px;
            height: 48px;
            margin-bottom: 10px;
        }
        .upload-text {
            margin: 5px 0;
        }
        .nav-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
        }
        .top-right-menu {
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
            gap: 10px;
        }
        .top-right-menu button {
            padding: 8px 15px;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 右上角功能菜单 -->
    <div class="top-right-menu">
        <a href="IDCard.html"><button style="background-color: #2ecc71;">身份证认证</button></a>
        <!-- 预留其他功能按钮位置 -->
         <a href="pdf.html"> <button style="background-color: #2ecc71;">PDF快速识别</button></a>
        <!-- <button style="background-color: #9b59b6;">其他功能2</button> -->
    </div>

    <h1>文字识别</h1>

    <div class="upload-area" id="uploadArea">
        <svg class="upload-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#3498db" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
            <polyline points="17 8 12 3 7 8"></polyline>
            <line x1="12" y1="3" x2="12" y2="15"></line>
        </svg>
        <p class="upload-text">点击或拖拽文件到此处上传</p>
        <p class="upload-text"><small>支持PDF、JPG、PNG格式（不超过5MB）</small></p>
        <input type="file" id="imageFile" accept=".pdf, .png, .jpg, .jpeg, application/pdf, image/png, image/jpeg">
    </div>

    <img id="imagePreview" alt="文件预览">

    <div class="nav-buttons">
        <button id="recognizeBtn" disabled>识别文字</button>
    </div>

    <div class="tips">
        <p><strong>使用提示：</strong></p>
        <ul>
            <li>请确保文件清晰可见，无反光、遮挡</li>
            <li>支持PDF文档和图片文件中的文字识别</li>
            <li>为保护隐私，识别完成后请及时清除信息</li>
            <li>识别结果可手动编辑修正</li>
        </ul>
    </div>

    <div class="error-message" id="errorMessage" style="display: none;"></div>

    <div class="result-container" id="resultContainer" style="display: none;">
        <div class="result-title">识别结果</div>
        <textarea id="resultText" placeholder="识别结果将显示在这里..."></textarea>
        <div class="action-buttons">
            <button id="copyBtn" style="background-color: #2ecc71;">复制文本</button>
            <button id="clearBtn" style="background-color: #e74c3c;">清除信息</button>
        </div>
    </div>

    <div class="loading" id="loading" style="display: none;">
        <div class="spinner"></div>
        <p>正在识别文字，请稍候...</p>
    </div>
</div>

<script>
    // 获取DOM元素
    const uploadArea = document.getElementById('uploadArea');
    const imageFile = document.getElementById('imageFile');
    const imagePreview = document.getElementById('imagePreview');
    const recognizeBtn = document.getElementById('recognizeBtn');
    const resultContainer = document.getElementById('resultContainer');
    const resultText = document.getElementById('resultText');
    const loading = document.getElementById('loading');
    const errorMessage = document.getElementById('errorMessage');
    const copyBtn = document.getElementById('copyBtn');
    const clearBtn = document.getElementById('clearBtn');

    // 点击上传区域触发文件选择
    uploadArea.addEventListener('click', () => {
        imageFile.click();
    });

    // 拖拽功能
    uploadArea.addEventListener('dragover', (e) => {
        e.preventDefault();
        uploadArea.classList.add('active');
    });

    uploadArea.addEventListener('dragleave', () => {
        uploadArea.classList.remove('active');
    });

    uploadArea.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadArea.classList.remove('active');

        if (e.dataTransfer.files.length) {
            imageFile.files = e.dataTransfer.files;
            handleFileSelection();
        }
    });

    // 文件选择变化
    imageFile.addEventListener('change', handleFileSelection);

    function handleFileSelection() {
        // 隐藏之前的结果和错误
        resultContainer.style.display = 'none';
        errorMessage.style.display = 'none';

        if (imageFile.files && imageFile.files[0]) {
            const file = imageFile.files[0];
            const validTypes = ['application/pdf', 'image/jpeg', 'image/png'];

            // 验证文件类型
            if (!validTypes.includes(file.type)) {
                showError('请上传PDF、JPG或PNG格式的文件');
                return;
            }

            // 验证文件大小 (5MB)
            if (file.size > 5 * 1024 * 1024) {
                showError('文件大小超过5MB限制');
                return;
            }

            // 如果是图片，显示预览
            if (file.type.startsWith('image/')) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    imagePreview.src = e.target.result;
                    imagePreview.style.display = 'block';
                    recognizeBtn.disabled = false;
                };
                reader.readAsDataURL(file);
            } else {
                // PDF不显示预览
                imagePreview.style.display = 'none';
                recognizeBtn.disabled = false;
            }
        }
    }

    // 显示错误信息
    function showError(message) {
        errorMessage.textContent = message;
        errorMessage.style.display = 'block';
        recognizeBtn.disabled = true;
        imagePreview.style.display = 'none';
    }

    // 隐藏错误信息
    function hideError() {
        errorMessage.style.display = 'none';
    }

    // 识别按钮点击事件
    recognizeBtn.addEventListener('click', async () => {
        if (!imageFile.files.length) return;

        const formData = new FormData();
        formData.append('file', imageFile.files[0]);

        // 显示加载中，隐藏结果和错误
        loading.style.display = 'block';
        resultContainer.style.display = 'none';
        hideError();

        try {
            const response = await fetch('/ocr/imageToText', {
                method: 'POST',
                body: formData
            });

            const data = await response.json();

            // 隐藏加载中
            loading.style.display = 'none';

            if (response.ok) {
                if (data.status === 'error') {
                    showError(data.text || '识别失败');
                } else {
                    // 显示识别结果
                    resultText.value = data.text || data.texts?.join('\n') || '未识别到文字';
                    resultContainer.style.display = 'block';
                }
            } else {
                showError(data.text || '识别失败: 未知错误');
            }
        } catch (error) {
            loading.style.display = 'none';
            showError('请求失败: ' + error.message);
        }
    });

    // 复制按钮点击事件
    copyBtn.addEventListener('click', () => {
        resultText.select();
        document.execCommand('copy');

        // 显示复制成功提示
        const originalText = copyBtn.textContent;
        copyBtn.textContent = '已复制!';
        setTimeout(() => {
            copyBtn.textContent = originalText;
        }, 2000);
    });

    // 清除按钮点击事件
    clearBtn.addEventListener('click', () => {
        // 清除文件选择和预览
        imageFile.value = '';
        imagePreview.src = '';
        imagePreview.style.display = 'none';
        recognizeBtn.disabled = true;

        // 清除结果
        resultText.value = '';
        resultContainer.style.display = 'none';

        // 清除错误信息
        hideError();
    });
</script>
</body>
</html>